<script setup>
import SvgIcon from "@/components/iconfont/SvgIcon.vue";
import buttonStore from "@/store/button.js";
import {computed} from "vue";
import useUserInfoStore from "@/store/user.js";
const userStore = useUserInfoStore();
const store = buttonStore()
const isCollapse = computed(() => store.isCollapse)
const width = computed(() => store.isCollapse ? '64px' : '200px')
</script>
<template>
  <el-aside class="layout-aside" :width="width">
    <!--  router: 路由菜单，即菜单的每一项都可以映射到一个Vue Router的路由上
          active-text-color:菜单项被激活（即当前页面路由匹配到该菜单项对应的路由）时，菜单项的文字颜色将变为#ffd04b（一种亮黄色）
          text-color="#999": 菜单项未激活时的文字颜色设置为#999（一种灰色）
          :default-openeds="['1']": 这个属性用于设置默认展开的菜单项的索引
          :default-active="to" 页面加载时默认激活菜单的 index
    -->
    <div class="title" v-show="!isCollapse">
      <h2>AdPulse</h2>
      <h3>欢迎您：{{userStore.userInfo.username}}</h3>
    </div>
    <div v-show="isCollapse" class="title-2">
      <h3>Ad</h3>
    </div>
    <el-menu router
             :default-active="'/home'"
             active-text-color="#ffd04b"
             text-color="#999"
              background-color="#001529" :collapse="isCollapse" :collapse-transition="false">
      <el-menu-item index="/home">
        <el-icon>
          <SvgIcon iconName="icon-guanggaojihua"/>
        </el-icon>
        <template #title>
          <span>广告计划</span>
        </template>
      </el-menu-item>
      <el-menu-item index="/unit">
        <el-icon>
          <SvgIcon iconName="icon-guanggaodanyuan"/>
        </el-icon>
        <template #title>
          <span>广告单元</span>
        </template>
      </el-menu-item>
      <el-menu-item index="/creatives">
        <el-icon>
          <SvgIcon iconName="icon-chuangyiguanli"/>
        </el-icon>
        <template #title>
          <span>创意管理</span>
        </template>
      </el-menu-item>
            <el-sub-menu index="">
              <!--仅管理员能访问-->
              <template #title>
                <el-icon>
                  <SvgIcon iconName="icon-biaoqianguanli"/>
                </el-icon>
                <span>标签管理</span>
              </template>
              <el-menu-item index="/hobbies">兴趣标签</el-menu-item>
              <el-menu-item index="/districts">地域标签</el-menu-item>
            </el-sub-menu>
      <el-menu-item index="/feedback">
        <el-icon>
          <SvgIcon iconName="icon-yonghufankui"/>
        </el-icon>
        <template #title>
          <span>用户反馈</span>
        </template>
      </el-menu-item>
    </el-menu>
  </el-aside>
</template>

<style scoped lang="less">
.title,.title-2 {
  color: #ffd04b;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.img {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  align-content: flex-start;
}
.layout-aside {
  color: #ffd04b; /*设置元素内文本的颜色*/
  background-color: #001529; /*背景颜色*/
  padding: 0;
}
.title, .el-menu {
  width: 100%;
}

</style>